<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>数据列表 - Spring Boot</title>
    <!-- Bootstrap CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
    <h2>数据管理</h2>

<!--    &lt;!&ndash; 导入 Excel 表单 &ndash;&gt;-->
<!--    <div class="card mb-4">-->
<!--        <div class="card-body">-->
<!--            <h5>导入 Excel</h5>-->
<!--            <form method="post" action="/import" enctype="multipart/form-data">-->
<!--                <input type="file" name="file" class="form-control" accept=".xlsx,.xls" required>-->
<!--                <button type="submit" class="btn btn-primary mt-2">导入</button>-->
<!--            </form>-->
<!--        </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; 搜索表单 &ndash;&gt;-->
<!--    <form method="get" action="/" class="mb-3">-->
<!--        <div class="input-group">-->
<!--            <input type="text" name="keyword" class="form-control" placeholder="搜索关键词"-->
<!--                   th:value="${keyword} ?: ''">-->
<!--            <button class="btn btn-outline-secondary">搜索</button>-->
<!--        </div>-->
<!--    </form>-->

<!--    &lt;!&ndash; 数据列表 &ndash;&gt;-->
<!--    <table class="table table-striped">-->
<!--        <thead>-->
<!--        <tr>-->
<!--            <th>ID</th>-->
<!--            <th>名称</th>-->
<!--            <th>日期时间</th>-->
<!--            <th>显示格式</th>-->
<!--        </tr>-->
<!--        </thead>-->
<!--        <tbody>-->
<!--        <tr th:each="data : ${list}">-->
<!--            <td th:text="${data.id}"></td>-->
<!--            <td th:text="${data.name}"></td>-->
<!--            <td th:text="${#temporals.format(data.dateTime, 'yyyy-MM-dd HH:mm')}"></td>-->
<!--            <td th:text="${data.timeStr}"></td>-->
<!--        </tr>-->
<!--        </tbody>-->
<!--    </table>-->

<!--    &lt;!&ndash; 分页 &ndash;&gt;-->
<!--    <nav aria-label="分页">-->
<!--        <ul class="pagination">-->
<!--            <li class="page-item" th:classappend="${currentPage} <= 1 ? 'disabled' : ''">-->
<!--                <a class="page-link" th:href="@{/(keyword=${keyword}, page=${currentPage - 1})}">上一页</a>-->
<!--            </li>-->

<!--            <li class="page-item active">-->
<!--                <span class="page-link" th:text="${currentPage}"></span>-->
<!--            </li>-->

<!--            <li class="page-item" th:classappend="${currentPage} >= ${totalPages} ? 'disabled' : ''">-->
<!--                <a class="page-link" th:href="@{/(keyword=${keyword}, page=${currentPage + 1})}">下一页</a>-->
<!--            </li>-->
<!--        </ul>-->
<!--    </nav>-->

    <!-- 刷新按钮 -->
    <button id="refreshBtn" class="btn btn-success mt-3">🔄 刷新数据（调用接口）</button>

    <!-- 数据显示区域 -->
    <div id="apiData" class="mt-3 alert alert-info" style="display:none;">
        <h5>API 返回数据：</h5>
        <ul id="dataList"></ul>
    </div>

    <script>
        document.getElementById('refreshBtn').addEventListener('click', async function() {
            const postData = {
                page: "1",
                size: "10",
                // 搜索模式：1精确2模糊搜索
                searchMode: 2,
                // 搜索位置:1、标题2、内容；null或不传为不限
                searchPosition:1,
                // 搜索内容
                keyword: "第九"
            };
            try {
                const response = await fetch('/api/data-info/list', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'  // 告诉后端：我是 JSON
                    },
                    body: JSON.stringify(postData)  // 把 JS 对象转为 JSON 字符串
                });
                // const response = await fetch('/api/data-info/list');
                const data = await response.json();

                const listEl = document.getElementById('dataList');
                listEl.innerHTML = ''; // 清空
                const records = data.records;
                records.forEach(item => {
                    const li = document.createElement('li');
                    li.textContent = `${item.id} | ${item.number} | ${item.title}`;
                    listEl.appendChild(li);
                });

                document.getElementById('apiData').style.display = 'block';
            } catch (error) {
                alert('请求失败：' + error.message);
            }
        });
    </script>
</div>

<!-- Bootstrap JS（可选） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>